<template>
  <div class="apply-dialog">
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      :fullscreen="true"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <LimitTech ref="LimitTech" @showTech="openTech" />
      <Tech ref="Tech" @showLimit="openHelp" />
      <div slot="title" class="flex flex-row align-center justify-content-end">
        <div class="btn-list flex flex-row align-center">
          <!-- <el-button type="primary" size="mini" @click="handlePrint(printData)">
            导出PDF
          </el-button> -->
          <el-button
            type="primary"
            size="mini"
            :disabled="submitDisabled"
            @click="submitAction"
            v-if="btnShow"
          >
            提交
          </el-button>
          <el-button v-if="!pdfLoading" type="primary" size="mini" @click="outPutPdfFn()">
            导出PDF
          </el-button>
          <el-button v-else type="primary" size="mini" :loading="true">
            正在导出
          </el-button>
<!--          <div class="pl15 pr15">
            上报人：<span class="primary-color">{{
              processStructureValue.workOrder.createdName
            }}</span>
          </div>
          <div class="pl15 pr15">
            最新状态：<span
              v-if="processStructureValue.workOrder.status == 2"
              class="danger-color"
            >已撤回</span>
            <span
              v-if="processStructureValue.workOrder.status == 3"
              class="danger-color"
            >已驳回</span>
            <span
              v-if="processStructureValue.workOrder.status == 0"
              class="primary-color"
            >{{ processStructureValue.workOrder.current_state_name }}</span><span
              v-if="processStructureValue.workOrder.principals != ''"
              class="ml20"
            >当前处理人：</span><span
              v-if="processStructureValue.workOrder.principals != ''"
              class="danger-color"
            >【{{ processStructureValue.workOrder.principals }}】</span>
          </div>-->
          <div class="ml20" @click="handleClose">
            <i class="el-icon-close cursor-p font22 line-height-32" />
          </div>
        </div>
      </div>
      <div v-if="dialogVisible" class="text item reviewFrom">
        <div id="pdfHtml" class="app-container flex flex-row">
          <div class="left flex-auto ">
            <el-card
              class="box-card apply-box mt10 mb20"
            >
              <div slot="header" class="clearfix flex flex-row align-center">
                <div class="line" />
                <span class="font18 ml10 flex-auto">申报者</span>
                <el-button
                  id="no-print"
                  type="danger"
                  round
                  icon="el-icon-thumb"
                  size="small"
                  @click="openHelp"
                >申报指引</el-button>
              </div>

              <el-form
                ref="generateForm"
                label-suffix=":"
                size="small"
                :model="models"
                label-position="right"
                label-width="100px"
                :disabled="true"
              >
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="项目名称"
                      prop="name"
                      label-width="130px"
                    >
                      <el-input
                        :style="{width:'100%'}"
                        placeholder="请输入项目名称"
                        v-model="models.name"
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="项目编号"
                      prop="project_no_block"
                    >
                      <el-input
                        :style="{width:'100%'}"
                        placeholder="请输入项目编号"
                        v-model="models.projectNo"
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="项目分类"
                      prop="projectClass"
                      label-width="130px"
                    >
                      <el-select
                        :style="{width:'100%'}"
                        placeholder="请选择项目分类"
                        v-model="models.projectClass"
                        :filterable="false"
                        clearable
                        value=""
                      >
                        <el-option
                          v-for="(item, index) in [{label:'非限制',value:1},{label:'限制类',value:2}]"
                          :value="item.value"
                          :key="index"
                          :label="item.label"
                        />

                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="申请科室"
                      prop="applyDeptId"
                    >
                      <el-select
                        :style="{width:'100%'}"
                        placeholder="请选择科室"
                        v-model="models.applyDeptId"
                        :filterable="false"
                        clearable
                        @change="handleChange"
                        value=""
                      >
                        <el-option
                          v-for="(item, index) in structureList"
                          :value="item.id"
                          :key="item.id"
                          :label="item.depName"
                        />

                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="技术类别"
                      prop="projectClass"
                      label-width="130px"
                    >
                      <el-select
                        :style="{width:'100%'}"
                        placeholder="请选择项目分类"
                        v-model="models.techType"
                        :filterable="false"
                        clearable
                        value=""
                      >
                        <el-option
                          v-for="(item, index) in [{label:'手术操作',value:1},{label:'检验检查',value:2},{label:'其他治疗技术',value:3}]"
                          :value="item.value"
                          :key="index"
                          :label="item.label"
                        />

                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="科室负责人"
                      prop="applyManagerName"
                    >
                      <el-input
                        :style="{width:'100%'}"
                        placeholder="自动带入"
                        v-model="models.applyManagerName"
                        disabled
                      >
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="填报人姓名"
                      prop="applyUserName"
                      label-width="130px"
                    >
                      <el-input
                        :style="{width:'100%'}"
                        placeholder="请输入填报人姓名"
                        v-model="models.applyUserName"
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="填报人工号"
                      prop="workNumber"
                    >
                      <el-input
                        :style="{width:'100%'}"
                        placeholder="请输入工号"
                        v-model="models.workNumber"
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="完成填报时间"
                      prop="fillTime"
                      label-width="130px"
                    >
                      <el-input
                        :style="{width:'100%'}"
                        placeholder="请输入项目名称"
                        v-model="models.fillTime"
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="设备或试剂"
                      prop="equipmentReagentsExist"
                    >
                      <el-radio-group
                        v-model="models.equipmentReagentsExist"
                        :style="{ width: 130 }"
                      >
                        <el-radio
                          v-for="(item, index) in [{label:'有',value:1},{label:'无',value:0}]"
                          :key="index"
                          class="incat-radio incat-mini"
                          :style="{display: 'inline-block'}"
                          :label="item.value"
                        >
                          <template>{{ item.label }}</template>
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="16"
                  >
                    <el-form-item
                      label="备注"
                      prop="remark"
                      label-width="130px"
                    >
                      <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="请输入项目名称"
                        v-model="models.remark"
                        :style="{ width: '62%' }"
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="16"
                  >
                    <el-form-item
                      label="申请书"
                      prop="applyDocs"
                      label-width="130px"
                    >
                      <FileUpload :element="uploadConfig" :data-model="models.applyDocs&&JSON.parse(models.applyDocs)"  :preview="true" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="16"
                  >
                    <el-form-item
                      label="设备三证"
                      prop="deviceDocs"
                      label-width="130px"
                    >
                      <FileUpload :element="uploadConfig" :data-model="models.deviceDocs&&JSON.parse(models.deviceDocs)" :preview="true" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="16"
                  >
                    <el-form-item
                      label="设备三证为"
                      label-width="130px"
                    >
                      <span>*</span>
                      <span
                        style="{'font-size':'15px','font-weight':'500',color:'#606266'}"
                      >
                    《医疗器械生产企业许可证》、《医疗器械注册证》和《医疗器械经营企业许可证》。
                  </span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="16"
                  >
                    <el-form-item
                      label="补充资料"
                      prop="additionalDocs"
                      label-width="130px"
                    >
                      <FileUpload :element="uploadConfig" :data-model="models.additionalDocs&&JSON.parse(models.additionalDocs)" :preview="true" />
                    </el-form-item>
                  </el-col>
                </el-row>

              </el-form>

            </el-card>


            <el-card class="box-card apply-box mb20">
              <div slot="header" class="clearfix flex flex-row align-center height32">
                <div class="line" />
                <span class="font16 ml10 flex-auto">审批历史</span>
              </div>
              <div class="text item pt10 pb10 pl10 pr10">
                <el-table :data="circulationHistoryList" border style="width: 100%" stripe max-height="600">
                  <el-table-column prop="id" label="#" align="center" type="index" width="70" />
                  <el-table-column prop="processOper" label="任务名称" align="center" />
                  <el-table-column prop="processBy" label="处理人" align="center" />
                  <el-table-column prop="status" label="审批操作" align="center">
                    <template slot-scope="scope">
                      <div v-if="scope.row.auditStatus == 1">
                        审批通过
                      </div>
                      <div v-if="scope.row.auditStatus == 2">
                        审批驳回
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="remarks" label="审批意见" align="center" :show-overflow-tooltip="true" />
                  <!-- <el-table-column prop="circulation" label="流转" align="center" /> -->
                  <el-table-column prop="updateTime" label="处理时间" align="center" width="180" />
                  <el-table-column prop="status" label="状态" align="center" width="90">
                    <template slot-scope="scope">
                      <div v-if="scope.row.status == 0" class="warning-color">
                        待处理
                      </div>
                      <div v-if="scope.row.status == 1" class="primary-color">
                        已处理
                      </div>
                      <div v-if="scope.row.status == 2" class="primary-color">
                        无需处理
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>


            <el-card v-if="models.status===10" class="box-card apply-box mb20">
              <div slot="header" class="clearfix flex flex-row align-center height32">
                <div class="line" />
                <span class="font16 ml10 flex-auto">科室负责人初审</span>
              </div>
              <el-form
                ref="departmentForm"
                label-suffix=":"
                size="small"
                :model="departmentTake"
                label-position="right"
                label-width="100px"
              >
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="初审结果"
                      prop="auditStatus"
                      label-width="130px"
                    >
                      <el-select
                        :style="{width:'100%'}"
                        placeholder="请选择初审结果"
                        v-model="departmentTake.auditStatus"
                        :filterable="false"
                        clearable
                        value=""
                      >
                        <el-option
                          v-for="(item, index) in [{label:'通过',value:1},{label:'不通过',value:4}]"
                          :value="item.value"
                          :key="index"
                          :label="item.label"
                        />

                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="16"
                  >
                    <el-form-item
                      label="审批意见"
                      prop="remarks"
                      label-width="130px"
                    >
                      <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="请输入审批意见"
                        v-model="departmentTake.remarks"
                        :style="{ width: '62%' }"
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>

            <el-card  v-if="models.status===20" class="box-card apply-box mb20">
              <div slot="header" class="clearfix flex flex-row align-center height32">
                <div class="line" />
                <span class="font16 ml10 flex-auto">医务部初审</span>
              </div>
              <el-form
                ref="departmentForm"
                label-suffix=":"
                size="small"
                :model="medicalTake"
                label-position="right"
                label-width="100px"
              >
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="初审结果"
                      prop="auditStatus"
                      label-width="130px"
                    >
                      <el-select
                        :style="{width:'100%'}"
                        placeholder="请选择初审结果"
                        v-model="medicalTake.auditStatus"
                        :filterable="false"
                        clearable
                        value=""
                      >
                        <el-option
                          v-for="(item, index) in [{label:'通过',value:1},{label:'驳回',value:4}]"
                          :value="item.value"
                          :key="index"
                          :label="item.label"
                        />

                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="16"
                  >
                    <el-form-item
                      label="初审意见"
                      prop="remarks"
                      label-width="130px"
                    >
                      <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="请输入初审意见"
                        v-model="medicalTake.remarks"
                        :style="{ width: '62%' }"
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>


            <el-card v-if="models.status===30" class="box-card apply-box mb20">
              <div slot="header" class="clearfix flex flex-row align-center height32">
                <div class="line" />
                <span class="font16 ml10 flex-auto">伦理委员会</span>
              </div>
              <el-form
                ref="ethicsTakeForm"
                label-suffix=":"
                size="small"
                :model="ethicsTake"
                label-position="right"
                label-width="100px"
              >
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="审核结果"
                      prop="auditStatus"
                      label-width="130px"
                    >
                      <el-select
                        :style="{width:'100%'}"
                        placeholder="请选择审核结果"
                        v-model="ethicsTake.auditStatus"
                        :filterable="false"
                        clearable
                        value=""
                      >
                        <el-option
                          v-for="(item, index) in [{label:'通过',value:1},{label:'驳回',value:4}]"
                          :value="item.value"
                          :key="index"
                          :label="item.label"
                        />

                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="16"
                  >
                    <el-form-item
                      label="初审意见"
                      prop="remarks"
                      label-width="130px"
                    >
                      <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="请输入初审意见"
                        v-model="ethicsTake.remarks"
                        :style="{ width: '62%' }"
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="16"
                  >
                    <el-form-item
                      label="附件"
                      prop="attach"
                      label-width="130px"
                    >
                      <FileUpload :element="uploadConfig" :preview="false" @fileList="fileList2" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>

            <el-card v-if="models.status===40" class="box-card apply-box mb20">
              <div slot="header" class="clearfix flex flex-row align-center height32">
                <div class="line" />
                <span class="font16 ml10 flex-auto">院内评审</span>
              </div>
              <el-form
                ref="insuranceForm"
                label-suffix=":"
                size="small"
                :model="hospitalTake"
                label-position="right"
                label-width="100px"
              >
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="审核结果"
                      prop="auditStatus"
                      label-width="130px"
                    >
                      <el-select
                        :style="{width:'100%'}"
                        placeholder="请选择审核结果"
                        v-model="hospitalTake.auditStatus"
                        :filterable="false"
                        clearable
                        value=""
                      >
                        <el-option
                          v-for="(item, index) in [{label:'通过',value:1},{label:'驳回',value:4}]"
                          :value="item.value"
                          :key="index"
                          :label="item.label"
                        />

                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="16"
                  >
                    <el-form-item
                      label="审核意见"
                      prop="remarks"
                      label-width="130px"
                    >
                      <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="请输入审核意见"
                        v-model="hospitalTake.remarks"
                        :style="{ width: '62%' }"
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>


            <el-card  v-if="models.status===50" class="box-card apply-box mb20">
              <div slot="header" class="clearfix flex flex-row align-center height32">
                <div class="line" />
                <span class="font16 ml10 flex-auto">医保办</span>
              </div>
              <el-form
                ref="insuranceForm"
                label-suffix=":"
                size="small"
                :model="insuranceTake"
                label-position="right"
                label-width="100px"
              >
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="16"
                  >
                    <el-form-item
                      label="项目名称"
                      prop="remark"
                      label-width="100px"
                    >
                      <el-input
                        placeholder="请输入项目名称"
                        v-model="models.name"
                        :style="{ width: '100%' }"
                        disabled
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="医保编码"
                      prop="insuranceNo"
                    >
                      <el-input
                        :style="{width:'100%'}"
                        placeholder="请输入医保编码"
                        v-model="insuranceTake.insuranceNo"
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="支付类型"
                      prop="payType"
                      label-width="130px"
                    >
                      <el-select
                        :style="{width:'100%'}"
                        placeholder="请选择支付类型"
                        v-model="insuranceTake.payType"
                        :filterable="false"
                        clearable
                        value=""
                      >
                        <el-option
                          v-for="(item, index) in [{label:'个人',value:1},{label:'医保',value:2}]"
                          :value="item.value"
                          :key="index"
                          :label="item.label"
                        />

                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>

            <el-card  v-if="models.status===60" class="box-card apply-box mb20">
              <div slot="header" class="clearfix flex flex-row align-center height32">
                <div class="line" />
                <span class="font16 ml10 flex-auto">财务审核</span>
              </div>
              <el-form
                ref="insuranceForm"
                label-suffix=":"
                size="small"
                :model="financeTake"
                label-position="right"
                label-width="100px"
              >
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="项目名称"
                      prop="name"
                      label-width="130px"
                    >
                      <el-input
                        placeholder="请输入项目名称"
                        v-model="models.name"
                        :style="{width:'100%'}"
                        disabled
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="医保编码"
                      prop="name"
                      label-width="100px"
                    >
                      <el-input
                        placeholder="请输入医保编码"
                        v-model="models.name"
                        :style="{width:'100%'}"
                        disabled
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="收费名称"
                      prop="payName"
                      label-width="130px"
                    >
                      <el-input
                        :style="{width:'100%'}"
                        placeholder="收费名称"
                        v-model="financeTake.payName"
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="收费价格"
                      prop="payPrice"
                    >
                      <el-input
                        :style="{width:'100%'}"
                        placeholder="请输入收费价格"
                        v-model="financeTake.payPrice"
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="16"
                  >
                    <el-form-item
                      label="开通时间"
                      prop="openTime"
                      label-width="130px"
                    >
                      <el-date-picker
                        v-model="financeTake.openTime"
                        type="date"
                        :style="{ width: '32%' }"
                        placeholder="请选择开通时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>


            <el-card  v-if="models.status===70" class="box-card apply-box mb20">
              <div slot="header" class="clearfix flex flex-row align-center height32">
                <div class="line" />
                <span class="font16 ml10 flex-auto">医务处开通</span>
              </div>
              <el-form
                ref="insurance1Form"
                label-suffix=":"
                size="small"
                label-position="right"
                label-width="100px"
              >
                <el-row
                  type="flex"
                  :gutter="30"
                  justify="start"
                  align="top"
                >
                  <el-col
                    :span="8"
                  >
                    <el-form-item
                      label="项目名称"
                      prop="name"
                      label-width="130px"
                    >
                      <el-input
                        placeholder="请输入项目名称"
                        v-model="models.name"
                        :style="{width:'100%'}"
                        disabled
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :span="8"
                  >
                    确认并通知申报人
                  </el-col>
                </el-row>
              </el-form>
            </el-card>

          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import { Message, Loading } from 'element-ui'
import { GenerateForm } from '@/components/VueFormMaking'
import 'form-making/dist/FormMaking.css'
Vue.component(GenerateForm.name, GenerateForm)
import LimitTech from './limitTech/index.vue'
import Tech from './tech/index.vue'
import { getDuration } from '@/utils/costum'
import {
  processStructure,
  handleWorkOrder,
  activeOrder, newDoApprove, newWorkOrderList
} from '@/api/xjs/work-order'
import {listAllUser, newListUser} from '@/api/system/sysuser'
import {getNewDeptInfo, getNewDeptList, getOrdinaryDeptList, newGetUserList, newTreeselect} from '@/api/system/dept'
import { mapGetters } from 'vuex'
import printJS from 'print-js'
import FileUpload from "@/components/VueFormMaking/components/Upload/file.vue";
import moment from "moment/moment";
import {newGetUserInfo} from "@/api/user";
export default {
  name: 'ApplyDialog',
  components: {
    FileUpload,
    LimitTech,
    Tech
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    listData:{
      type: Object,
      default(){
        return {}
      }
    }
  },
  data() {
    return {
      uploadConfig:{
        options:{
          // action: "http://192.168.0.107:8002/api/v1/public/uploadFile?file_type=files"
          defaultValue:[],
          disabled:false,
          length:9,
          tip:'',
          width:'30%'
        }
      },
      structureList:[],
      structureUserList:[],
      models: {

      },
      submitDisabled: false,
      departmentTake:{},
      medicalTake:{},
      ethicsTake:{},
      hospitalTake:{},
      insuranceTake:{},
      financeTake:{},
      btnShow:true,
      take:{
        departmentTake:{},
        medicalTake:{},
        ethicsTake:{},
        hospitalTake:{},
        insuranceTake:{},
        financeTake:{},
      },
      timelineShow: false,
      timeLine: [],
      getDuration,
      pdfLoading: false,
      loadingFull: null,
      ops: {
        vuescroll: {
          mode: 'native',
          sizeStrategy: 'percent',
          detectResize: true,
          locking: true
        },
        scrollPanel: {
          maxHeight: 800
        },
        bar: {
          background: '#277fd6',
          size: '3px',
          keepShow: true
        },
        rail: {
          background: '#E0E8F0',
          opacity: 1,
          size: '3px',
          specifyBorderRadius: false,
          gutterOfEnds: '50px',
          gutterOfSide: '0px',
          keepShow: false
        }
      },
      printData: {
        printable: 'printFrom',
        header: '',
        ignore: ['no-print']
      },
      limitTechList: [],
      selectLimitData: [],
      loading: false,
      dialogVisible: false,
      limitTechVisible: false,
      isLoadingStatus: true,
      currentNode: {
        hideTpls: null,
        writeTpls: null
      },
      isActiveProcessing: false,
      tpls: [],
      remarks: '', // 备注信息
      alertMessage: '',
      nodeStepList: [],
      circulationHistoryList: [],
      activeIndex: 0,
      processStructureValue: {
        workOrder: { title: '' }
      },
      ruleForm: {
        title: '',
        projectNo: '',
        process: '',
        classify: '',
        state_id: '',
        state: '',
        source_state: '',
        processor: '',
        process_method: '',
        tpls: [],
        tasks: []
      },
      processId: null,
      workOrderId: null,
      remoteFunc: {
        // 获取用户列表
        async userList(resolve) {
          const res = await listAllUser({})
          const options = res.data
          resolve(options)
        },
        async deptTreeList(resolve) {
          const res = await getOrdinaryDeptList()
          resolve(res.data)
        }
      }
    }
  },
  computed: {
    ...mapGetters(['name', 'userId','newUserInfo'])
  },
  methods: {
    fileList2(files) {
      // this.models.additionalDocsTemp = files;
      this.ethicsTake.attach = files
    },
    getHistoryState(item) {
      if (item.circulation == '结束') {
        return '审批完成'
      } else if (item.circulation == '已撤回') {
        return '已撤回'
      } else {
        if (item.status == 2) {
          if (item.target != '') {
            return '提交申报'
          } else {
            return '转交'
          }
        } else if (item.status == 0) {
          return '审批驳回'
        } else {
          return '审批通过'
        }
      }
    },
    getHistoryTag(item) {
      if (item.circulation == '结束') {
        return 'success'
      } else if (item.circulation == '已撤回') {
        return 'danger'
      } else {
        if (item.status == 2) {
          if (item.target != '') {
            return ''
          } else {
            return 'warning'
          }
        } else if (item.status == 0) {
          return 'danger'
        } else {
          return 'success'
        }
      }
    },
    downLoadDoc(type) {
      var a = document.createElement('a')
      switch (type) {
        case 1:
          a.href =
            '/static/xjs/非限制类使用——甘肃省人民医院医疗技术临床应用审核申请书（操作技术）.docx'
          a.download =
            '非限制类使用——甘肃省人民医院医疗技术临床应用审核申请书（操作技术）.docx'
          break
        case 2:
          a.href =
            '/static/xjs/非限制类使用——甘肃省人民医院医疗技术临床应用审核申请书（检验检查）.docx'
          a.download =
            '非限制类使用——甘肃省人民医院医疗技术临床应用审核申请书（检验检查）.docx'
          break
        case 3:
          a.href = '/static/xjs/限制类备案使用——新技术备案申请表（样表）.docx'
          a.download = '限制类备案使用——新技术备案申请表（样表）.docx'
          break
        case 4:
          a.href = '/static/xjs/限制类备案使用——新技术备案申请表（样表）.docx'
          a.download = '限制类备案使用——新技术备案申请表（样表）.docx'
          break
        case 5:
          a.href = '/static/xjs/限制类备案使用——新技术备案申请表（样表）.docx'
          a.download = '限制类备案使用——新技术备案申请表（样表）.docx'
          break
      }
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      a.remove()
    },
    openHelp() {
      this.$refs.Tech.close()
      this.$refs.LimitTech.open()
    },
    openTech() {
      this.$refs.LimitTech.close()
      this.$refs.Tech.open()
    },
    outPutPdfFn() {
      const vm = this
      const A4_WIDTH = 592.28
      const A4_HEIGHT = 841.89 // $myLoading 自定义等待动画组件，实现导出事件的异步等待交互
      this.pdfLoading = true
      this.loadingFull = Loading.service({
        target: document.querySelector('.app-wrapper'),
        lock: true,
        text: '正在导出中，请稍后……',
        background: 'rgba(0, 0, 0, 0.7)',
        customClass: 'zIndex9999'
      })
      vm.$nextTick(() => {
        // dom的id。
        const target = document.getElementById('pdfHtml')
        const pageHeight = target.scrollWidth / A4_WIDTH * A4_HEIGHT
        // 获取分割dom，此处为class类名为item的dom
        const lableListID = document.getElementsByClassName('item-excel')
        // 进行分割操作，当dom内容已超出a4的高度，则将该dom前插入一个空dom，把他挤下去，分割
        for (let i = 0; i < lableListID.length; i++) {
          const multiple = Math.ceil((lableListID[i].offsetTop + lableListID[i].offsetHeight / 2) / pageHeight)
          if (this.isSplit(lableListID, i, multiple * pageHeight)) {
            const divParent = lableListID[i].parentNode
            // 获取该div的父节点
            const newNode = document.createElement('div')
            newNode.className = 'emptyDiv'
            newNode.style.background = '#ffffff'
            const _H = multiple * pageHeight - (lableListID[i].offsetTop + lableListID[i].offsetHeight)
            newNode.style.height = _H + 30 + 'px'
            newNode.style.width = '100%'
            const next = lableListID[i].nextSibling
            // 获取div的下一个兄弟节点
            // // 判断兄弟节点是否存在
            if (next) {
              // 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
              divParent.insertBefore(newNode, next)
            } else {
              // 不存在则直接添加到最后,appendChild默认添加到divParent的最后
              divParent.appendChild(newNode)
            }
          }
        }
        // 传入title和dom标签，此处是 #content// 异步函数，导出成功后处理交互
        this.getPdf(`${this.models.name}`, '#pdfHtml').then(() => {}).catch(() => {})
        setTimeout(() => {
          this.loadingFull.close()
          this.pdfLoading = false
        }, 2000)
        this.pdfLoading = false
      })
    },
    isSplit(nodes, index, pageHeight) {
      // 计算当前这块dom是否跨越了a4大小，以此分割
      if (nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight && nodes[index + 1] &&
        nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight) { return true }
      return false
    },
    handlePrint(params) {
      printJS({
        maxWidth: 1920,
        documentTitle: '甘肃省人民医院医务一网通办',
        printable: params.printable, // 'printFrom',
        type: params.type || 'html',
        header: params.header, // '表单',
        targetStyles: ['*'],
        ignoreElements: params.ignore || [], // ['no-print']
        properties: params.properties || null
      })
    },
    handleChange(v){
      getNewDeptInfo({id:v}).then(res=>{
        this.models.applyManagerId = res.records[0].deptManagerId
      })
    },
    handleClose(val) {
      // this.$refs['ruleForm'].resetFields()
      this.dialogVisible = false
      this.$emit('refreshTable')
    },
    open(row,btnShow) {
      console.log("列表数据",row)
      Promise.all([newWorkOrderList({correlationId:row.id}),getNewDeptList({pageSize:9999}),newGetUserInfo()]).then(resArr=>{
        const [circulationHistoryListData,deptData,userInfoData] = resArr
        console.log("用户信息",userInfoData)
        // const currentUserId = userInfoData.records[0].id;
        // const auditUserId = circulationHistoryListData.records[circulationHistoryListData.records.length-1].processUserId;
        // const status = circulationHistoryListData.records[circulationHistoryListData.records.length-1].status;
        this.circulationHistoryList = circulationHistoryListData.records
        this.structureList = deptData.records
        this.models = row
        // this.btnShow = status === 0 && currentUserId === auditUserId;
        this.btnShow = btnShow&&row.auditStatus*1 === 2
        this.dialogVisible = true
      })
    },

    getProcessNodeList(row) {
      this.models = row
      this.dialogVisible = true
      /*processStructure({
        processId: this.processId,
        workOrderId: this.workOrderId
      }).then(response => {
        this.isActiveProcessing = false
        this.processStructureValue = response.data
        this.circulationHistoryList = this.processStructureValue.circulationHistory
        if (this.circulationHistoryList.length > 0) {
          this.timelineShow = true
          this.timeLine = this.circulationHistoryList
        }
        this.ruleForm.projectNo = this.processStructureValue.workOrder.projectNo
        // 获取当前展示节点列表
        this.nodeStepList = []
        if (this.processStructureValue.nodes) {
          for (var i = 0; i < this.processStructureValue.nodes.length; i++) {
            if (
              this.processStructureValue.nodes[i].id ===
              this.processStructureValue.workOrder.current_state
            ) {
              // 当前节点
              this.nodeStepList.push(this.processStructureValue.nodes[i])
              this.activeIndex = this.nodeStepList.length - 1
              if (i + 1 === this.processStructureValue.nodes.length) {
                this.activeIndex = this.nodeStepList.length
              }
              this.currentNode = this.processStructureValue.nodes[i]
            } else if (!this.processStructureValue.nodes[i].isHideNode) {
              // 非隐藏节点
              this.nodeStepList.push(this.processStructureValue.nodes[i])
            }
          }
        }

        // 如果回退到初始节点则可编辑。
        if (this.activeIndex === 0 && this.currentNode.clazz === 'start') {
          this.currentNode.writeTpls = []
          for (var tplTmp of this.processStructureValue.tpls) {
            this.currentNode.writeTpls.push(tplTmp.form_structure.id)
          }
        }

        // 判断是否需要主动处理
        for (var stateValue of this.processStructureValue.workOrder.state) {
          if (
            this.processStructureValue.workOrder.current_state ===
              stateValue.id &&
            stateValue.processor.length > 1
          ) {
            this.isActiveProcessing = true
            break
          }
        }
        this.dialogVisible = true
        this.isLoadingStatus = false
      })*/
    },
    submitAction() {
      const { id,name } = this.models;
      let params ={
        id,
        remarks:'',
        auditStatus:1,
        task:"",
        openTime:""
      }
      switch (this.models.status){
        case 10:
          // newDoApprove
          params.remarks = this.departmentTake.remarks;
          params.auditStatus = this.departmentTake.auditStatus
          break;
        case 20:
          params.remarks = this.medicalTake.remarks;
          params.auditStatus = this.medicalTake.auditStatus
          break;
        case 30:
          params.remarks = this.ethicsTake.remarks;
          params.auditStatus = this.ethicsTake.auditStatus
          params.task = JSON.stringify(this.ethicsTake)
          break;
        case 40:
          params.remarks = this.hospitalTake.remarks;
          params.auditStatus = this.hospitalTake.auditStatus
          break;
        case 50:
          params.task = JSON.stringify(this.insuranceTake)
          break;
        case 60:
          this.financeTake.openTime = moment(this.financeTake.openTime).format('YYYY-MM-DD')
          params.openTime = this.financeTake.openTime
          params.task = JSON.stringify(this.financeTake)
          break;
        case 70:
          break;
        default:
          break
      }


      console.log("提交的数据",params)

      newDoApprove(params).then(res=>{
        console.log(res)
        this.$message({
          type: 'success',
          message: '提交成功!'
        })
        // this.auditStatus = 2
        this.submitDisabled = false
        this.handleClose()
        // this.$router.push({ path: '/project/applyList' })
      })

    }
  }
}
</script>

<style lang="scss" scoped>
/* 去掉全选按钮 */
::v-deep .el-table .disabledCheck .cell .el-checkbox__inner {
    display: none !important;
}

::v-deep .el-table .disabledCheck .cell::before {
    content: "请选择";
    text-align: center;
    line-height: 37px;
}
.app-container {
    max-width: 1530px;
    margin: 0 auto;
    // background: #ebf4fa;
    border-radius: 12px;
    .apply-box {
        border-radius: 15px;
        .line {
            height: 22px;
            width: 5px;
            background: #277fd6;
        }
    }
    .history-box {
        border-radius: 15px;
        .line {
            height: 22px;
            width: 5px;
            background: #277fd6;
        }
    }
}
</style>
